<template>
	<!-- 列表区域  内边距30upx 垂直居中  下边线， 线的颜色是浅灰色 -->
	<view class="p-3 flex align-center border-bottom border-light-secondary bg-light " hover-class="bg-hover-light"
	 @click="$emit('click')">
		<!-- 文件夹图标 填充为黄色 style设置图标的大小-->
		<text class="iconfont " :class="iconClass" style="font-size: 60upx;"></text>
		<!-- 中间的内容 采用flex布局  设置主轴为y轴  距离左边的外边距为30upx-->
		<view class="flex flex-column ml-3" style="line-height: 1.2;">
			<!-- 文件名字信息 字体大小35upx -->
			<text class="font-md">{{item.name}}</text>
			<!-- 时间信息 字体大小25upx  灰色字体-->
			<text class="font-sm text-muted">{{item.create_time}}</text>
		</view>
		<!-- 最右侧的是否选中的图标  margin-left: auto;自动靠右， flex布局，xy轴都居中 style大小为70upx见方-->
		<!-- 给选择这个块一个事件，同时给@click一个stop修饰符，阻止单击事件继续传播 -->
		<view class="ml-auto flex align-center justify-center" style="width: 70upx;height: 70upx;"
			@click.stop="selected">
			<!-- 未选中状态 这里先注释掉  40upx见方，圆形，带边线 -->
			<text style="height: 40upx;width: 40upx;" class="rounded-circle border" v-if="!item.checked"></text>
			<!-- 选中状态 大小40upx 图标样式为已选中 颜色是蓝色-->
			<text style="font-size: 40upx;" class="iconfont icon-xuanze-yixuan text-primary" v-else></text>
		</view>
	</view>
</template>

<script>
	//定义一个常量，来处理图标
	const icons = {
		dir: {
			icon: "icon-file-b-2",
			color: "text-warning" //黄色
		},
		image: {
			icon: "icon-file-b-6",
			color: "text-success" //绿色
		},
		video: {
			icon: "icon-file-b-9",
			color: "text-primary" //蓝色
		},
		text: {
			icon: "icon-file-b-7",
			color: "text-info" //蓝色
		},
		none: {
			icon: "icon-file-b-8",
			color: "text-muted" //深灰色
		}
	}
	export default {
		//在props里面接收父组件传入的信息
		props: {
			item: Object,
			//这个index接收数字类型或字符串类型都行，因为父组件传过来的这个index可能都是，哈哈
			index: [Number, String]
		},
		//动态计算每个文件的具体图标
		computed: {
			iconClass() {
				//根据props中接收到的item的type属性得到当前图标
				const currentIcon = icons[this.item.type]
				//将当前图标的属性作为样式返回
				return `${currentIcon.icon} ${currentIcon.color}`
			}
		},
		data() {
			return {

			}
		},
		methods: {
			//选中|不选中的事件
			selected() {
          //向父组件传递事件
					this.$emit("selected",{
						index:this.index, //索引就是父组件传过来的索引
						value:!this.item.checked //对选中状态取反
					})
			}
		}
	}
</script>

<style>

</style>
